<script setup>
import { ref, onActivated, onDeactivated } from "vue";

const count = ref(0)

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
  console.log('A被激活')
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
  console.log('A被缓存')
})
</script>

<template>
  <div>
    <p>Current component: A</p>
    <button @click="count++">{{count}}</button>
  </div>
</template>